<template>
  <div class="Login">
    <van-nav-bar title="猫眼电影" left-arrow @click-left="onClickLeft" />
    <van-form>
      <van-cell-group inset>
        <van-field
          v-model="loginUserInfo.phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          autocomplete="off"
        />
        <van-field
          v-model="loginUserInfo.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          autocomplete="off"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" color="#e4393c" @click="login()">登录</van-button>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="default" @click="showPopup">注册</van-button>
      </div>
    </van-form>
    <van-popup v-model="show" position="bottom" closeable>
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="registerUserInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            autocomplete="off"
          />
          <van-field
            v-model="registerUserInfo.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            autocomplete="off"
          />
          <van-field
            v-model="registerUserInfo.nickName"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            autocomplete="off"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="default" color="#e4393c" @click="register()">注册</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      show: false,
      loginUserInfo: {
        phone: "",
        password: ""
      },
      registerUserInfo: {
        phone: "",
        password: "",
        nickName: ""
      }
    };
  },
  created() {},
  methods: {
    showPopup() {
      this.show = !this.show;
    },
    onClickLeft() {
      history.back();
    },
    register() {
      localStorage.setItem("user", JSON.stringify(this.registerUserInfo));
      this.show = false;
      for (let key in this.registerUserInfo) {
        this.registerUserInfo[key] = "";
      }
    },
    login() {
      if (localStorage.getItem("user")) {
        if (
          JSON.parse(localStorage.getItem("user")).phone ==
            this.loginUserInfo.phone &&
          JSON.parse(localStorage.getItem("user")).password ==
            this.loginUserInfo.password
        ) {
          localStorage.setItem("Loginuser", true);
          this.$router.push({ name: "My" });
        }
      } else {
        console.log("账号或者密码错误");
      }
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #e4393c;
  .van-icon {
    color: #eee;
  }
  .van-nav-bar__title {
    color: #eee;
  }
}
/deep/.van-form {
  margin-top: 30px;
}
</style>